<template>
  <footer>
    <p>
      <span class="link">项目地址：</span>
      <a class="link" href="https://gitee.com/zhu-maosheng/vue-tools" target="_blank">https://gitee.com</a>
    </p>
    <span class="link">友情链接：</span>
    <a class="link" href="https://uigradients.com/" target="_blank">uigradients.com</a>
    <a class="link" href="https://webkul.github.io/coolhue/" target="_blank">CoolHue</a>
    <a class="link" href="https://codepen.io/aglaea/pen/XWVQQZd" target="_blank">codepen.io</a>
    <a class="link" href="https://neumorphism.io/#e0e0e0" target="_blank">neumorphism.io</a>
  </footer>
</template>

<style lang="scss" scoped>
.link {
  color: #ffffff;
  opacity: 0.7;
  line-height: 1.8;
  transition: all 0.2s;
  display: inline-block;

  &[href] {
    margin-right: 1em;
    text-transform: capitalize;
    &:hover {
      opacity: 1;
    }
  }
}
</style>
